<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>安装vue</title>
    <!-- <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script> -->
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      {{msg}}

      <ul class="list" v-for="(opt, index) in items" :key="index">
        <li>
          <label>第{{index+1}}项</label>
          <input type="number" v-model.lazy.number="opt.content" />
        </li>
      </ul>
      <button @click="newadd">新增一项</button>
      {{newsum()}}
    </div>
    <script>
      var vue = new Vue({
        el: "#app",
        data: {
          msg: "hello world",
          items: [],
        },
        methods: {
          newadd() {
            this.items.push({ index: this.items.length, content: "" });
          },
          newsum() {
            var sum = 0;
            // this.items.forEach((key) => {
            //   if (key.content === "") return;
            //   console.log(key.content);
            //   sum += parseInt(key.content);
            // });
            for (var key of this.items) {
              console.log(this.items.length);
              if (key.content === "") continue;
              sum += parseInt(key.content);
            }
            // 循环数组 使用 for of  循环对象 使用 for in
            // for (key in this.items) {
            //   console.log(key);
            // }
            return sum;
          },
        },
      });
    </script>
  </body>
</html>
